<template>
    
        <div id="app">
            <van-config-provider class="provide" theme="light">
            <div class="header">
                
            </div>
            <div class="content">
                <router-view></router-view>
            </div>
            <div v-if="!$route.meta.footerHidden" class="footer">
                <van-tabbar v-model="active" route>
                    <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
                    <van-tabbar-item to="/cate" icon="apps-o">分类</van-tabbar-item>
                    <van-tabbar-item to="/cart" icon="cart-o">购物车</van-tabbar-item>
                    <van-tabbar-item v-if="userStore.is_login"  to="/self" icon="contact" >我的</van-tabbar-item>
                    <van-tabbar-item v-else to="/login" icon="contact" dot>未登入</van-tabbar-item>
                </van-tabbar>

            </div> 
        </van-config-provider>
        </div>
   
  
</template>
<script setup lang="ts">
import { RouterView ,useRoute} from 'vue-router';
import { ref } from 'vue'
import  useUserInfo  from '@/stores/users'
const userStore =useUserInfo()
const active =ref<number>(0)
const $route = useRoute()

</script>
<style scoped>
#app, .provide{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.provide{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.header{
    width: 100%;
}
.provide> .footer{
    height: 50px;
    width: 100%;
}
.provide>.content{
    flex: 1;
    width: 100%;
    overflow: auto;
}

</style>
